<template>
  <div class="orderDetail">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="订单详情"
      left-text
      left-arrow
      :border="false"
      @click-left="onClickLeft"
      class="header"
      :class="stateCode === 'cancel' ? 'header_cancel' : ''"
    >
      <van-icon name="service" slot="right" @click="serverBtn" />
    </van-nav-bar>
    <div
      class="header_content"
      :class="stateCode === 'cancel' ? 'header_content_cancel' : ''"
    >
      <div class="header_content_top">
        <h1 class="header_content_title" v-if="stateCode === 'paying'">
          待付款
        </h1>
        <h1 class="header_content_title" v-else-if="stateCode === 'payed'">
          已付款
        </h1>
        <h1 class="header_content_title" v-else-if="stateCode === 'cancel'">
          已取消
        </h1>
        <p class="header_content_info" v-if="stateCode === 'paying'">
          请在{{ orderData.autoTaking }}前付款，以免超时自动取消并产生罚款
        </p>
        <p class="header_content_info" v-else-if="stateCode === 'cancel'">
          订单已取消，应罚款1230元
        </p>
        <p class="header_content_info" v-else-if="stateCode === 'payed'">
          1件宝贝已成功购买，已付12131元
        </p>
      </div>
      <div class="header_content_bottom">
        <span class="courier_code">订单编号 {{ orderData.courierCode }}</span>
        <!--    更多信息    -->
        <van-dropdown-menu
          class="more_info"
          :class="stateCode === 'cancel' ? 'more_info_cancel' : ''"
        >
          <van-dropdown-item class="more_info_ref" title="更多信息" ref="item">
            <div class="more_info_item">更多信息</div>
            <div class="more_info_item">
              创建时间：{{ moreInfo.createTime }}
            </div>
            <div class="more_info_item">
              创建时间：{{ moreInfo.createTime }}
            </div>
            <div class="more_info_item">付款时间：{{ moreInfo.payTime }}</div>
            <div class="more_info_item">
              <span class="fl">付款数量：{{ moreInfo.payCount }}</span>
              <span class="fr">付款金额：￥{{ moreInfo.payMoney }}</span>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </div>

    <!-- 下拉菜单 -->
    <div class="dropdown_menu">
      <van-dropdown-menu
        active-color="#ee0a24"
        class="dropdown_menu_navigation"
      >
        <!--   物品型号     -->
        <van-dropdown-item
          class="ropdown_menu_item"
          title="物品型号"
          ref="item1"
        >
          <div class="top_select_item">
            <van-radio-group
              v-model="radio"
              class="select_group"
              @change="topSelect"
            >
              <van-radio
                v-for="(item, index) in typeSelectItem"
                :key="index"
                :name="index"
              >
                <span
                  class="item_tag"
                  slot="icon"
                  slot-scope="props"
                  :class="props.checked ? 'item_tag_checked' : ''"
                  >{{ item.value }}</span
                >
              </van-radio>
            </van-radio-group>
          </div>
          <div class="bottom_select_item">
            <van-tree-select
              active-color="#ee0a24"
              :items="items"
              :active-id.sync="activeId"
              :main-active-index.sync="activeIndex"
              @click-nav="clickNav"
              @click-item="clickItem"
            />
          </div>
          <div class="bottom_btn">
            <van-button
              class="reset select_btn"
              type="default"
              @click="resetBtn1"
              >重置</van-button
            >
            <van-button
              class="confirm select_btn"
              type="default"
              @click="confirmBtn1"
              >确认</van-button
            >
          </div>
        </van-dropdown-item>
        <!--  物品等级  -->
        <van-dropdown-item
          class="ropdown_menu_item"
          title="物品等级"
          ref="item2"
        >
          <van-radio-group v-model="gradeSelect" class="class_select_content">
            <van-cell-group class="class_select_group">
              <van-cell
                class="class_select_item"
                title="全部"
                clickable
                @click="gradeSelect = 'All'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="All"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="A"
                clickable
                @click="gradeSelect = 'A'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="A" />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="B+2"
                clickable
                @click="gradeSelect = 'B+2'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="B+2"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="C"
                clickable
                @click="gradeSelect = 'C'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="C" />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="D"
                clickable
                @click="gradeSelect = 'D'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="D" />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="E+2"
                clickable
                @click="gradeSelect = 'E+2'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="E+2"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="F+2"
                clickable
                @click="gradeSelect = 'F+2'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="F+2"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <div class="bottom_btn">
            <van-button
              class="reset select_btn"
              type="default"
              @click="resetBtn2"
              >重置</van-button
            >
            <van-button
              class="confirm select_btn"
              type="default"
              @click="confirmBtn2"
              >确认</van-button
            >
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <!--  物品详情  -->
    <div class="section">
      <div
        class="nav_btn_content_item"
        v-for="(item, index) in goodsInformation"
        :key="index"
      >
        <div class="item_top">
          <span class="treasure_number"> 物品编号: {{ item.number }} </span>
          <i class="treasure_state">{{ item.state }}</i>
        </div>
        <div class="item_middle">
          <div class="item_middle_item_top">
            <span class="item_grade">{{ item.grade }}</span>
            <h1 class="item_title">
              {{ item.title }}
            </h1>
            <span class="item_price" v-if="stateCode === 'cancel'">{{
              item.price
            }}</span>
          </div>
          <div class="item_middle_item_bottom">
            <p class="item_middle_info">
              {{ item.info }}
            </p>
          </div>
        </div>
        <div class="item_third">
          <p class="item_third_price">
            {{ item.priceType }} <span>￥{{ item.priceTotal }}</span>
          </p>
        </div>

        <div class="item_info" v-if="stateCode === 'cancel'">
          <span class="fuck_off_info">因逾期未支付，订单已取消</span>
        </div>
        <div class="item_info" v-else-if="stateCode === 'payed'">
          <span class="fuck_off_info">如需要申请售后，请先确认收货</span>
        </div>
        <div class="item_bottom" v-if="stateCode === 'payed'">
          <van-button class="item_bottom_right" type="default"
            >查看物流</van-button
          >
        </div>
      </div>
    </div>

    <!--  底部支付  -->
    <div class="footer_bottom" v-if="stateCode === 'paying'">
      <div class="pay_price fl">
        合计 <span class="total_price">￥{{ payPriceTotal }}</span>
      </div>
      <van-button type="default" class="pay_btn fr">付款</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderDetail",
  data() {
    return {
      // 订单状态码  cancel 已取消， paying 待付款, payed 已付款
      stateCode: "",
      orderData: {
        Courier: "顺丰快递",
        courierCode: "12163761743514",
        orderState: "待付款",
        autoTaking: "0天19小时11分钟"
      },
      // 更多信息
      moreInfo: {
        createTime: "2019-06-19 08:09:12",
        payTime: "2019-06-19 08:09:12",
        payCount: "1",
        payMoney: "1,431.00"
      },
      /**
       * 物品型号顶部筛选
       */
      radio: 0, // 默认品类型号顶部筛选选中状态
      typeSelectItem: [
        { id: 1, value: "手机" },
        { id: 2, value: "平板" },
        { id: 3, value: "笔记本" },
        { id: 4, value: "其他数码" }
      ],
      /**
       * 物品型号底部筛选
       */
      items: [
        {
          // 导航名称
          text: "全部",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "苹果 iPhone 7Plus",
              id: 2
            },
            {
              text: "苹果 iPhone 7Plus",
              id: 3
            }
          ]
        },
        {
          // 导航名称
          text: "苹果",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "华为vxada1",
              id: 2
            },
            {
              text: "华为12",
              id: 3
            }
          ]
        },
        {
          // 导航名称
          text: "荣耀",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "荣耀1asgd",
              id: 2
            },
            {
              text: "荣耀2sfds",
              id: 3
            }
          ]
        }
      ],
      activeId: 1,
      activeIndex: 0,
      /**
       * 物品等级筛选
       */
      gradeSelect: "All",
      // 物品信息
      goodsInformation: [
        {
          number: "1637175145164516", // 物品编号
          Courier: "顺丰",
          courierCode: "12163761743514", // 快递编号
          state: "待支付",
          totalCount: "1",
          parcelState: "快件在【深圳集散中心】已装车准备发往..",
          afterSalesTime: "12 : 22 : 22",
          autoTaking: "6天6小时51分",
          grade: "A2",
          title: "产品标题产品标题产品标题产品标题adadada",
          info: "5300 11什么介绍什么介绍什么介绍什么介绍",
          price: "123.00",
          priceType: "中标价",
          priceTotal: "1,213.00"
        }
      ],
      payPriceTotal: "1,213.00"
    };
  },
  created() {
    // 订单状态  cancel 已取消， paying 待付款, payed 已付款
    this.stateCode = this.$route.query.payState;
  },
  methods: {
    // 品类型号顶部筛选
    topSelect(e) {
      console.log(e, this.radio);
    },
    // 品类型号底部部筛选
    clickNav(index) {
      console.log(index);
    },
    clickItem(data) {
      console.log(data);
    },
    // 重置 确认
    resetBtn1() {
      this.activeIndex = 0;
      this.activeId = 1;
    },
    confirmBtn1() {
      console.log(this.activeIndex, this.activeId);
      this.$refs.item1.toggle();
    },

    // 物品等级按钮
    resetBtn2() {
      this.gradeSelect = "All";
    },
    confirmBtn2() {
      console.log(this.gradeSelect);
      this.$refs.item2.toggle();
    },

    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
    serverBtn() {
      console.log("客服");
    }
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.orderDetail {
  .header {
    height: 100px;
    background: #ff3b3e;
    .van-icon {
      font-size: 20px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .van-nav-bar__title {
      height: 50px;
      line-height: 50px;
      font-size: 19px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
    }
  }
  .header_cancel {
    background: #50515e;
  }
  .header_content {
    height: 275px;
    background: #ff3b3e;
    padding: 0 30px;
    padding-top: 40px;
    /*border-bottom: 2px dotted rgba(255,255,255,1);*/
    .header_content_top {
      height: 140px;
      width: 100%;
      border-bottom: 2px dotted rgba(255, 255, 255, 1, 0.5);
      .header_content_title {
        height: 41px;
        font-size: 42px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
      }
      .header_content_info {
        height: 27px;
        font-size: 25px;
        margin-top: 30px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        opacity: 0.7;
      }
    }
    .header_content_bottom {
      height: 90px;
      line-height: 90px;
      .courier_code {
        float: left;
        font-size: 25px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        opacity: 0.7;
      }
      .more_info {
        float: right;
        width: 220px;
        height: 95px;
        background-color: #ff3b3e;
        @{deep} .van-ellipsis {
          font-size: 13px;
          font-family: SourceHanSansCN;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
        @{deep} .van-dropdown-menu__title::after {
          color: rgba(255, 255, 255, 1);
        }
        .more_info_ref {
          font-size: 26px;
          font-family: PingFang SC;
          color: rgba(193, 193, 193, 1);
          @{deep} .van-popup {
            width: 100%;
            padding: 0 15px;
            background: rgba(0, 0, 0, 1);
            opacity: 0.8;
            border-radius: 0px 0px 18px 18px;
          }
        }
      }
      .more_info_cancel {
        background: #50515e;
      }
    }
  }
  .header_content_cancel {
    background: #50515e;
  }
  /* 下拉菜单 */
  .dropdown_menu {
    width: 100%;
    .dropdown_menu_navigation {
      .ropdown_menu_item {
        background: rgba(255, 255, 255, 1);
        /* 左边筛选 */
        .top_select_item {
          height: 120px;
          padding-bottom: 22px;
          .select_group {
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-direction: row;
            flex-wrap: nowrap;
            .item_tag {
              display: block;
              width: 150px;
              height: 58px;
              background: rgba(237, 237, 237, 1);
              border-radius: 29px;
              text-align: center;
              line-height: 58px;
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
            }
            .item_tag_checked {
              background: rgba(255, 240, 240, 1);
              color: rgba(255, 59, 62, 1);
            }
          }
        }
        .bottom_select_item {
          border-top: 1px solid rgba(206, 206, 206, 1);
          @{deep} .van-tree-select__nav {
            background: rgba(242, 242, 242, 1);
            .van-sidebar-item {
              text-align: center;
              line-height: 55px;
            }
          }
          @{deep} .van-sidebar-item--select {
            border-color: rgba(255, 59, 62, 1);
          }
          @{deep} .van-tree-select__content {
            padding-left: 16px;
            .van-ellipsis {
              text-align: center;
              line-height: 78px;
              border-bottom: 1px solid rgba(226, 226, 226, 1);
            }
          }
          @{deep} .van-tree-select__item--active {
            color: rgba(255, 59, 62, 1);
          }
        }
        .bottom_btn {
          width: 100%;
          height: 128px;
          background: rgba(250, 250, 250, 1);
          display: flex;
          justify-content: space-around;
          .select_btn {
            width: 260px;
            height: 58px;
            line-height: 58px;
            margin-top: 35px;
            font-family: SourceHanSansCN;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            background: rgba(255, 59, 62, 1);
            border-radius: 29px;
          }
          .reset {
            background: rgba(250, 250, 250, 1);
            border: 2px solid rgba(51, 51, 51, 1);
            color: rgba(51, 51, 51, 1);
          }
        }
        /* 中间筛选 */
        .class_select_content {
          // height: 616px;
          width: 100%;
          padding: 0 27px;
          .class_select_group {
            .class_select_item {
              height: 90px;
            }
          }
        }
      }
      @{deep} .van-dropdown-menu__title {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  /* 物品详情 */
  .section {
    min-height: 732px;
    padding: 0 30px;
    padding-bottom: 100px;
    .nav_btn_content_item {
      width: 690px;
      margin-top: 30px;
      background: rgba(255, 255, 255, 1);
      border-radius: 9px;
      padding: 0 30px;
      .item_top {
        width: 100%;
        height: 98px;
        line-height: 98px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        border-bottom: 2px dotted rgba(226, 226, 226, 1);
        .treasure_number {
          float: left;
          font-size: 26px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
        .treasure_state {
          float: right;
          font-size: 26px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 59, 62, 1);
        }
      }
      .item_middle {
        width: 100%;
        border-bottom: 2px dotted rgba(226, 226, 226, 1);
        padding: 35px 0;
        .item_middle_item_top {
          height: 42px;
          font-family: SourceHanSansCN;
          .item_grade {
            float: left;
            width: 80px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            background: #ff3b3e;
            border-radius: 21px;
            font-size: 24px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
          .item_title {
            float: left;
            width: 387px;
            margin-left: 20px;
            line-height: 42px;
            font-size: 28px;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .item_price {
            float: right;
            font-size: 26px;
            line-height: 42px;
            font-family: SourceHanSansCN;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
        }
        .item_middle_info {
          margin-top: 25px;
          height: 23px;
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
      }
      .item_third {
        width: 100%;
        height: 128px;
        /*padding: 0 30px;*/
        line-height: 128px;
        .item_third_price {
          width: 100%;
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          span {
            font-size: 34px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
      .item_info {
        width: 690px;
        height: 78px;
        line-height: 78px;
        margin-left: -30px;
        background: rgba(255, 59, 62, 0.08);
        padding-left: 30px;
        .fuck_off_info {
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 59, 62, 1);
        }
      }
      .item_bottom {
        height: 98px;
        .item_bottom_right {
          float: right;
          padding: 0;
          width: 150px;
          height: 58px;
          line-height: 58px;
          border: 2px solid rgba(51, 51, 51, 1);
          border-radius: 29px;
          margin-top: 20px;
        }
      }
    }
  }

  /* 底部按钮 */
  .footer_bottom {
    width: 100%;
    height: 98px;
    background: rgba(255, 255, 255, 1);
    .pay_price {
      position: absolute;
      border-bottom: 0;
      height: 98px;
      width: 550px;
      text-align: right;
      line-height: 98px;
      font-size: 26px;
      font-family: SourceHanSansCN;
      padding-right: 25px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      .total_price {
        font-size: 34px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: rgba(51, 51, 51, 1);
      }
    }
    .pay_btn {
      width: 200px;
      height: 98px;
      background: #ff3b3e;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
